<!--
 * @Description: 
 * @Date: 2024-04-12 09:34:06
 * @LastEditTime: 2024-04-28 14:33:59
-->
<template>
  <div class="representative">
    <div class="representative-top"></div>
    <div class="representative-content">
      <div class="item1">
        <div class="item-title">代表类别</div>
        <div class="item-matter">
          <div>
            <pie1
              className="pie1"
              :chartData="chartData1 && chartData1.option"
            ></pie1>
          </div>
          <div style="padding: 0 20p; width: 100%" v-if="chartData1">
            <div
              style="
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
              "
              v-for="item in chartData1 && chartData1.echartData"
              :key="item.name"
            >
              <div style="margin-right: 10px; font-size: 18px"></div>
              <div style="flex: 1">
                <div style="margin-bottom: 10px">
                  {{ item.name }}
                  <span>{{ Number( (item.value / chartData1.num) * 100).toFixed(2)  }}%</span>
                </div>
                <el-progress
                  :text-inside="true"
                  :stroke-width="15"
                  :percentage="(item.value / chartData1.num) * 100"
                  :show-text="false"
                ></el-progress>
              </div>
            </div>
          </div>
          <el-empty
            v-else
            :image="require('../../../assets/images/null.png')"
            description="暂无数据"
          ></el-empty>
        </div>
      </div>
      <div>
        <div class="item-title">性别结构</div>
        <div class="item-matter">
          <pie1 className="pie2" :chartData="chartData2"></pie1>
        </div>
      </div>
      <div>
        <div class="item-title">党派构成</div>
        <div class="item-matter">
          <pie1 className="pie3" :chartData="chartData3"></pie1>
        </div>
      </div>
      <div>
        <div class="item-title">民族构成</div>
        <div class="item-matter">
          <pie1 className="pie4" :chartData="chartData4"></pie1>
        </div>
      </div>
      <div>
        <div class="item-title">学历构成</div>
        <div class="item-matter">
          <pie1 className="pie5" :chartData="chartData5"></pie1>
        </div>
      </div>
      <div class="item6">
        <div class="item-title">年龄结构</div>
        <div class="item-matter">
          <bar-4 className="bar4"></bar-4>
        </div>
      </div>
    </div>
    <!-- <div>返回</div> -->
    <img
      class="goBack"
      @click="
        () => {
          this.$router.go(-1);
        }
      "
      src="../../../assets/images/digitzation/back.png"
    />
    <div class="choice">
      <el-select
        v-model="value"
        placeholder="请选择"
        @change="changeSession"
        style="width: 100%"
      >
        <el-option
          v-for="dict in sessionList"
          :key="dict.seId"
          :label="dict.label"
          :value="dict.seId"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
import pie1 from "../components/representative/pie1.vue";
import bar4 from "../components/representative/bar4.vue";
import autofit from "autofit.js";
import { addSessionList } from "@/api/dbxx/dbxxLevel/index";
import { groupBy } from "@/api/digitization/representative/index";
import {
  pie1Data,
  pieData2,
  pieData3,
  pieData4,
} from "../components/representative/homeData";
export default {
  data() {
    return {
      value: "",
      sessionList: [],
      chartData1: null,
      chartData2: null,
      chartData3: null,
      chartData4: null,
      chartData5: null,
      listData: [{}],
      listCount: null,
    };
  },
  dicts: ["nationality"],
  created() {
    addSessionList().then((response) => {
      response.rows.forEach((item) => {
        item.label =
          item.area +
          `第${item.session}届人民代表大会` +
          `第${item.orderName}次会议` +
          `(${item.annual})`;
      });
      this.sessionList = response.rows;
      this.value = Number(this.sessionList[0].seId);
    });
    this.getList();
  },
  components: {
    pie1,
    bar4,
  },
  mounted() {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: ".representative",
      resize: true,
    });
  },
  methods: {
    getList() {
      groupBy({ seId: this.value, groupByField: "post_type" }).then(
        (response) => {
          this.chartData1 = pie1Data(response.data);
        }
      );
      groupBy({ seId: this.value, groupByField: "sex" }).then((response) => {
        this.chartData2 = pieData2(response.data);
      });
      groupBy({ seId: this.value, groupByField: "party" }).then((response) => {
        this.chartData3 = pieData3(response.data, "party");
      });
      groupBy({ seId: this.value, groupByField: "qualification" }).then(
        (response) => {
          this.chartData5 = pieData3(response.data);
        }
      );
      groupBy({ seId: this.value, groupByField: "nationality" }).then(
        (response) => {
          this.chartData4 = pieData4(response.data, this.dict.type.nationality);
        }
      );
    },
    changeSession(value) {
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.representative {
  width: 100%;
  height: 100%;
  background: #021132;
  display: flex;
  flex-direction: column;
  &-top {
    width: 100%;
    height: 50px;
  }
  &-content {
    width: 100%;
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 30px;
    & > div {
      background: url("../../../assets/images/digitzation/center2.png")
        no-repeat;
      background-size: 100% 100%;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .item-title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #fff;
        padding-left: 10px;
        font-size: 18px;
        background: url("../../../assets/images/digitzation/line.png") no-repeat;
        background-size: 100% 100%;
      }
      .item-matter {
        width: 100%;
        flex: 1;
      }
    }
    .item1 {
      grid-row: 1 / 3;
      .item-matter {
        display: flex;
        flex-direction: column;
        & > div:nth-child(1) {
          width: 100%;
          height: 50%;
        }
        & > div:nth-child(2) {
          width: 100%;
          flex: 1;
          color: #fff;
          flex-direction: column;
          display: flex;
          justify-content: space-evenly;
        }
      }
    }
    .item6 {
      grid-column: 3 / 5;
    }
  }
  .choice {
    width: 350px;
    position: absolute;
    right: 30px;
    top: 20px;
    ::v-deep .el-select {
      border-color: #3486da;
    }
    ::v-deep .el-select .el-input__inner {
      background: transparent;
      color: #fff;
      border-color: #3486da;
    }
  }
}
::v-deep .el-empty__description p {
  color: #3486da;
}
</style>
